<template>
  <div>
    <div class="header justify-between">
      <div class="logo"><img src="../assets/images/home/logo.jpg" /></div>
      <div class="icon" @click="show = true">
        <van-icon name="wap-nav" size="1.6rem" />
      </div>
    </div>
  </div>
  <!-- 遮罩层 -->
  <van-overlay :show="show" @click="show = false">
    <div class="header justify-between">
      <div class="logo"><img src="../assets/images/home/logo.jpg" /></div>
      <div class="icon"><van-icon name="wap-nav" size="1.6rem" /></div>
    </div>
    <div class="navlist">
      <router-link
        :to="item.route"
        v-for="(item, index) in navlist"
        :key="index"
      >
        <div
          :class="{ nav_i: true, active: item.isActive }"
          @click="selectNav(index)"
        >
          {{ item.name }}
        </div>
      </router-link>
    </div>
  </van-overlay>
  <!-- 内容 -->
    <router-view></router-view>
    <!-- 底部 -->
    <div class="footer">
      <div class="foo_item">
        <div class="item_title">专享服务</div>
        <div class="text"><span class="pot"></span>商超零售</div>
        <div class="text"><span class="pot"></span>物业租赁（店面/写字楼/厂房）</div>
        <div class="text"><span class="pot"></span>车辆与设备（工程车+运输车租售）</div>
        <div class="text"><span class="pot"></span>运输服务（车队与物流）</div>
      </div>
      <div class="foo_item">
        <div class="item_title">24H服务专线</div>
        <div class="text"><van-icon class="icon" name="phone" />商超专线 189 6666 8888</div>
        <div class="text"><van-icon class="icon" name="phone" />物业专线 189 6666 8888</div>
        <div class="text"><van-icon class="icon" name="phone" />车辆设备专线 189 6666 8888</div>
        <div class="text"><van-icon class="icon" name="phone" />车队专线 189 6666 8888</div>
      </div>
      <div class="foo_item">
        <div class="item_title">扫码联系我们</div>
        <div class="qrcode justify-between">
            <div class="qr_item">
                <van-image
                style="width:100%"
                fit="contain"
                src="../src/assets/images/home/Rectangle.jpg"
                />
                <div>咨询客服</div>
            </div>
            <div class="qr_item">
                <van-image
                style="width:100%"
                fit="contain"
                src="../src/assets/images/home/Rectangle.jpg"
                />
                <div>公众号(关注我)</div>
            </div>
        </div>
      </div>
      <div class="foo_item">
        <div class="item_title">备案号</div>
        <div class="text">京公网安备11000002000001号</div>
        <div class="text">京ICP证030173号</div>
        <div class="text">互联网新闻信息服务许可证11220180008</div>
      </div>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
let show = ref(false);

// 导航列表
const navlist = reactive([
  {
    name: "首页",
    route: "/home",
    isActive: true,
  },
  {
    name: "关于我们",
    route: "/about",
    isActive: false,
  },
  {
    name: "主营业务",
    route: "/main",
    isActive: false,
  },
  {
    name: "资源展示",
    route: "/resource",
    isActive: false,
  },
  {
    name: "联系我们",
    route: "/infomation",
    isActive: false,
  },
]);

const selectNav = (ind) => {
  navlist.forEach((item) => {
    item.isActive = false;
  });
  navlist[ind].isActive = true;
};
</script>
<style lang="less" scoped>
@import "@/assets/css/common.css";
.header {
  background: #ffffff;
  padding: 0.7rem;
  align-content: center;
}
.navlist {
  background: #ffffff;
  .nav_i {
    text-align: center;
    height: 3.5rem;
    line-height: 3.5rem;
    border-bottom: 1px solid #dddddd;
  }
  .active {
    color: #ed5522;
  }
}
.content{

}
//底部
.footer {
  background: #333333;
  color: #ffffff8c;
  padding:12px;
  .foo_item{
    margin-bottom:15px;
    .item_title{
        background: #ffffff10;
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        text-align: center;
    }
    .text{
        line-height: 3em;
        .pot{
            display: inline-block;
            background: #ffffff8c;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .icon{
            margin-right: 10px;
        }
    }
    .qrcode{
        padding-top: 10px;
        .qr_item{
            width: 42%;
            background: #FFFFFF;
            padding: 9px;
            border-radius: 4px;
            color: #707070;
            div{
                text-align: center;
            }
        }
    }
  }
}
</style>